<template>
  <dv-border-box-10 v-show="Istheme == '0'">
    <el-card class="card">
      <!-- <el-descriptions :column="2" border>
        <el-descriptions-item v-for="(item, index) in rovData" :key="index" :label="item.title + ':'">
          <span>{{ item.data }}&nbsp;</span>
          <span>{{ item.unit }}</span>
        </el-descriptions-item>
      </el-descriptions> -->
      <div class="rov_box">
        <div class="rov_item" v-for="(item, index) in rovData" :key="index">
          <span class="rov_title">{{ item.title }}</span> :
          <span class="rov_data">{{ item.data }}</span>
        </div>
      </div>

    </el-card>
  </dv-border-box-10>

  <dv-border-box-12 v-show="Istheme == '1'">
    <el-card class="card">
      <div class="rov_box">
        <div class="rov_item" v-for="(item, index) in rovData" :key="index">
          <span class="rov_title">{{ item.title }}</span> :
          <span class="rov_data">{{ item.data }}</span>
        </div>
      </div>
    </el-card>
  </dv-border-box-12>
</template>

<script>
export default {
  data() {
    return {
      rovData: [{ title: '温度', data: '18.5°' }, { title: '温度', data: '18.5°' }, { title: '温度', data: '18.5°' }, { title: '温度', data: '18.5°' }, { title: '温度', data: '18.5°' },],
    }
  },
  computed: {
    Istheme() {
      return this.$store.state.global.theme
    },
  },
}
</script>

<style lang="scss" scoped>
.card {
  background: transparent;
  border: none;
  padding: 0;
  height: 200px;

  .rov_box {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;


    .rov_item {
      width: 200px;
      border: 1px solid var(--el-color-primary);
      margin-bottom: 20px;
      color: #fff;
      font-size: 16px;
      padding: 5px 20px;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      box-shadow: 0 0 5px 5px var(--el-color-primary) inset
    }

  }
}


.el-descriptions__body {
  background: transparent;
}

.el-descriptions__content.el-descriptions__cell.is-bordered-content {
  color: #fff;
}

.el-descriptions__label.el-descriptions__cell.is-bordered-label {
  background: transparent;
  color: #fff;
}

.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
  border: 1px solid #fff;
}
</style>  